<template>
  <el-card class="post-detail">
    <div slot="header">
      <h2>{{ post.title }}</h2>
      <div class="post-meta">
        <span>作者：{{ post.author }}</span>
        <span>发布时间：{{ post.createTime }}</span>
      </div>
    </div>

    <div class="post-content">
      {{ post.content }}
    </div>

    <div class="post-stats">
      <el-row>
        <el-col :span="8">
          <el-statistic title="浏览" :value="post.views"></el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic title="点赞" :value="post.likes"></el-statistic>
        </el-col>
        <el-col :span="8">
          <el-statistic title="评论" :value="post.comments"></el-statistic>
        </el-col>
      </el-row>
    </div>

    <el-divider></el-divider>

    <div class="comment-section">
      <h3>评论（{{ comments.length }}）</h3>
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-header">
          <el-avatar :size="40" :src="comment.avatar"></el-avatar>
          <span class="username">{{ comment.username }}</span>
          <span class="time">{{ comment.time }}</span>
        </div>
        <p class="content">{{ comment.content }}</p>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      post: {
        id: 1,
        title: '猫咪日常护理指南',
        content: '...完整帖子内容...',
        author: '宠物达人',
        createTime: '2023-08-01 10:00',
        views: 256,
        likes: 45,
        comments: 12
      },
      comments: [
        {
          id: 1,
          username: '用户A',
          avatar: require('@/assets/images/img.png'),
          time: '2023-08-02 09:30',
          content: '非常实用的文章！'
        }
      ]
    }
  }
}
</script>